<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">评论</h1>
				</section>
			</div>
		</header>
		<div class="page-content">
			<!--评论区部分-->
			<section class="shop-summary">
				<div class="shop-summary-main">
					<h2 class="shop-name">{{ (business && business.businessName) ? business.businessName : '店铺评价' }}</h2>
					<p class="shop-desc" v-if="business && business.businessExplain">{{ business.businessExplain }}</p>
				</div>
				<div class="rating-summary">
					<div class="rating-score">
						<span class="score">{{ avgRating.toFixed(1) }}</span>
						<span class="label">综合评分</span>
					</div>
					<div class="rating-stars">
						<span
							v-for="n in 5"
							:key="n"
							class="star"
							:class="{ active: n <= Math.round(avgRating || 0) }"
						>
							★
						</span>
					</div>
					<div class="rating-count">{{ totalComments }} 条评价</div>
				</div>
			</section>

			<section class="comments-section">
				<h3 class="section-title">全部评价</h3>
				<ul class="remark-box" v-if="remarkArr && remarkArr.length">
					<li v-for="(item, index) in remarkArr" :key="index">
						<div class="remark-header">
							<span class="remark-user">{{ item.username }}</span>
							<span class="remark-time">{{ item.commentTime }}</span>
						</div>
						<div class="remark-stars">
							<span
								v-for="n in 5"
								:key="n"
								class="star"
								:class="{ active: n <= (item.starRating || 0) }"
							>
								★
							</span>
						</div>
						<div class="remark-body">{{ item.remark }}</div>
					</li>
				</ul>
				<div v-else class="no-comment">暂时还没有评论，快来抢沙发吧~</div>
			</section>
		</div>
		<!-- 发表评论部分 -->
		<div class="comment-editor">
			<div class="points-tip">
				<i class="material-icons">stars</i>
				<span>发表评论可获得 <span class="points-number">10</span> 积分</span>
			</div>
			<div v-if="!user || !user.userId" class="login-tip">
				<span>登录后才能发表评论</span>
				<button class="login-button" @click="goLogin">去登录</button>
			</div>
			<div v-else class="editor-inner">
				<div class="editor-stars">
					<span class="label">我的评分：</span>
					<span
						v-for="n in 5"
						:key="n"
						class="star"
						:class="{ active: n <= rating }"
						@click="setRating(n)"
					>
						★
					</span>
				</div>
				<textarea
					v-model="remarks"
					class="editor-input"
					rows="2"
					placeholder="说说你对本店的真实感受吧～"
				></textarea>
				<button
					class="submit-button"
					@click="userRemark"
					:disabled="submitting"
				>
					{{ submitting ? '提交中…' : '发表评价' }}
				</button>
			</div>
		</div>
		<!--底部部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import BackButton from '../components/BackButton.vue';
	export default {
		name: 'AppRemark',
		data() {
			return {
				businessId: this.$route.query.businessId,
				remarks: '',
				remarkArr: [],
				user: {},
				rating: 5,
				business: {},
				avgRating: 0,
				totalComments: 0,
				submitting: false
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.loadComments();
			this.loadBusinessInfo();
			this.loadBusinessRating();
		},
		methods: {
			setRating(n) {
				this.rating = n;
			},
			loadComments() {
				this.$axios.post('CommentController/showComments', this.$qs.stringify({
					businessId: this.businessId
				})).then(response => {
					if (response.data && (response.data.code === 200 || response.data.code === '200')) {
						// 直接使用后端返回的评论列表（包含评分等信息）
						this.remarkArr = response.data.result || [];
					}
				}).catch(error => {
					console.error(error); //输出错误信息
				});
			},
			loadBusinessInfo() {
				this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
					businessId: this.businessId
				})).then(response => {
					this.business = response.data || {};
				}).catch(error => {
					console.error(error);
				});
			},
			loadBusinessRating() {
				this.$axios.post('CommentController/getBusinessRating', this.$qs.stringify({
					businessId: this.businessId
				})).then(response => {
					if (response.data && (response.data.code === 200 || response.data.code === '200')) {
						const result = response.data.result || {};
						this.avgRating = Number(result.avgRating || 0);
						this.totalComments = Number(result.totalComments || 0);
					}
				}).catch(error => {
					console.error(error);
				});
			},
			userRemark() {
				if (!this.user || !this.user.userId) {
					alert('请先登录！');
					this.$router.push({ path: '/login' });
					return;
				}
				if (!this.remarks || this.remarks.trim() === '') {
					alert('评论不能为空！');
					return;
				}
				if (!this.rating || this.rating < 1 || this.rating > 5) {
					alert('请给出 1-5 星的评分！');
					return;
				}
				if (this.submitting) {
					return;
				}
				this.submitting = true;
				this.$axios.post('CommentController/user/createComment', this.$qs.stringify({
					userId: this.user.userId,
					remark: this.remarks,
					businessId: this.businessId,
					starRating: this.rating
				})).then(response => {
					if (response.data && response.data.code == '200') {
						alert('评论成功！');
						this.remarks = '';
						this.rating = 5;
						this.loadComments();
						this.loadBusinessRating();
					} else {
						alert(response.data && response.data.message ? response.data.message : '评论失败！');
					}
					this.submitting = false;
				}).catch(error => {
					console.error(error);
					this.submitting = false;
				});
			},
			goLogin() {
				this.$router.push({ path: '/login' });
			}
		},
		components: {
			BackButton
		}
	}
</script>
<style scoped>
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.page-content {
		flex: 1;
		padding: 3vw 4vw 24vw;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}

	/* 店铺概览 */
	.shop-summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 12px;
		padding: 3vw 4vw;
		margin-bottom: 3vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.shop-summary-main {
		flex: 1;
		margin-right: 3vw;
	}

	.shop-name {
		font-size: 4vw;
		font-weight: 600;
		color: #333;
		margin: 0 0 1vw 0;
	}

	.shop-desc {
		font-size: 3vw;
		color: #777;
		margin: 0;
	}

	.rating-summary {
		text-align: right;
		min-width: 28vw;
	}

	.rating-score .score {
		font-size: 5vw;
		font-weight: 700;
		color: #ffb400;
		display: block;
	}

	.rating-score .label {
		font-size: 2.8vw;
		color: #999;
	}

	.rating-stars {
		margin-top: 1vw;
	}

	.rating-stars .star {
		font-size: 3.5vw;
		color: #ccc;
		margin-left: 0.5vw;
	}

	.rating-stars .star.active {
		color: #ffb400;
	}

	.rating-count {
		margin-top: 1vw;
		font-size: 2.8vw;
		color: #999;
	}

	/* 评论列表 */
	.comments-section {
		margin-top: 2vw;
	}

	.comments-section .section-title {
		font-size: 3.6vw;
		font-weight: 600;
		color: #333;
		margin: 0 0 2vw 0;
	}

	.wrapper .remark-box {
		list-style: none;
		padding: 0;
		margin: 0 0 20vw 0;
	}

	.wrapper .remark-box li {
		background-color: #fff;
		border-radius: 10px;
		padding: 2.5vw 3vw;
		margin-bottom: 2vw;
		box-shadow: 0 1px 4px rgba(0,0,0,0.05);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2vw;
		font-size: 3.2vw;
		color: #333;
	}

	.remark-header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.remark-user {
		font-weight: 600;
		color: #333;
	}

	.remark-time {
		font-size: 2.6vw;
		color: #999;
	}

	.remark-stars .star {
		font-size: 3.2vw;
		color: #ccc;
		margin-right: 0.8vw;
	}

	.remark-stars .star.active {
		color: #ffb400;
	}

	.remark-body {
		font-size: 3.2vw;
		color: #444;
		line-height: 1.5;
	}

	.no-comment {
		padding: 4vw 2vw;
		text-align: center;
		font-size: 3.2vw;
		color: #999;
	}

	/* 评论编辑器 */
	.comment-editor {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 2vw 3vw 3vw;
		box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
		box-sizing: border-box;
	}

	.points-tip {
		display: flex;
		align-items: center;
		gap: 2vw;
		margin-bottom: 1.5vw;
		padding: 1.5vw 2vw;
		border-radius: 999px;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		color: #644F1B;
		font-size: 3vw;
	}

	.points-tip .material-icons {
		font-size: 4vw;
	}

	.points-tip .points-number {
		font-weight: 700;
	}

	.login-tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 3.2vw;
		color: #666;
	}

	.login-button {
		border: none;
		background-color: #1976D2;
		color: #fff;
		border-radius: 14px;
		padding: 1.5vw 3vw;
		font-size: 3vw;
		cursor: pointer;
	}

	.editor-inner {
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
	}

	.editor-stars {
		display: flex;
		align-items: center;
		gap: 1vw;
		font-size: 3.2vw;
		color: #666;
	}

	.editor-stars .star {
		font-size: 3.5vw;
		color: #ccc;
		cursor: pointer;
	}

	.editor-stars .star.active {
		color: #ffb400;
	}

	.editor-input {
		width: 100%;
		border-radius: 8px;
		border: 1px solid #ddd;
		font-size: 3.2vw;
		padding: 1.5vw 2vw;
		resize: none;
		box-sizing: border-box;
	}

	.submit-button {
		align-self: flex-end;
		border: none;
		border-radius: 16px;
		padding: 1.5vw 4vw;
		font-size: 3.2vw;
		background-color: #1976D2;
		color: #fff;
		cursor: pointer;
	}

	.submit-button[disabled] {
		background-color: #9e9e9e;
		cursor: not-allowed;
	}
</style>
